{extend name="$admin_layout"/}

{block name="style"}
<style>
    .page-footer {
        height: 25px;
        line-height: 25px;
        width: 100%;
        margin: 10px 0;
    }

    .row {
        margin-left: -8px;
        margin-right: -8px;
    }

    .container-fluid {
        overflow-y: scroll;
    }

    .pull-right .m-b-0 a {
        font-size: 24px
    }

    /** 未访问：白色、无下划线 */
    .pull-right .m-b-0 a:link {
        color: white;
        text-decoration: none;
    }

    /** 激活：红色 */
    .pull-right .m-b-0 a:active {
        color: white;
        text-decoration: none;
    }

    /** 已访问：蓝色、无下划线 */
    .pull-right .m-b-0 a:visited {
        color: white;
        text-decoration: none;
    }

    /** 鼠标移近：蓝色、下划线 */
    .pull-right .m-b-0 a:hover {
        color: white;
        text-decoration: none;
    }
</style>
{/block}

{block name="content"}
<div class="row">
    <!--<div class="col-sm-6 col-lg-3">
      <div class="card bg-primary">
        <div class="card-body clearfix">
          <div class="pull-right">
            <p class="h6 text-white m-t-0">今日收入</p>
            <p class="h3 text-white m-b-0">{$today_income}</p>
          </div>
          <div class="pull-left">
            <span class="img-avatar img-avatar-48 bg-translucent">
                <i class="mdi mdi-currency-cny fa-1-5x"></i>
            </span>
          </div>
        </div>
      </div>
    </div>-->

    <div class="col-sm-6 col-lg-3">
        <div class="card bg-success">
            <div class="card-body clearfix">
                <div class="pull-right">
                    <p class="h6 text-white m-t-0">会员总数</p>
                    <p class="h3 text-white m-b-0">
                        <a title="会员列表" class="open-tab" href="{:url('/admin/member/index')}">{$member_count}</a>
                    </p>
                </div>
                <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i
                        class="mdi mdi-account fa-1-5x"></i></span></div>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-lg-3">
        <div class="card bg-danger">
            <div class="card-body clearfix">
                <div class="pull-right">
                    <p class="h6 text-white m-t-0">产品总数</p>
                    <p class="h3 text-white m-b-0">
                        <a title="产品列表" class="open-tab" href="{:url('/admin/shopgoods/index')}">{$goods_count}</a>
                    </p>
                </div>
                <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i
                        class="mdi mdi-shopping fa-1-5x"></i></span></div>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-lg-3">
        <div class="card bg-info">
            <div class="card-body clearfix">
                <div class="pull-right">
                    <p class="h6 text-white m-t-0">订单总数</p>
                    <p class="h3 text-white m-b-0">
                        <a title="订单列表" class="open-tab" href="{:url('/admin/shoporder/index')}">{$order_count}</a>
                    </p>
                </div>
                <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i
                        class="mdi mdi-wallet-giftcard fa-1-5x"></i></span></div>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-lg-3">
        <div class="card bg-purple">
            <div class="card-body clearfix">
                <div class="pull-right">
                    <p class="h6 text-white m-t-0">待处理订单</p>
                    <p class="h3 text-white m-b-0">
                        <a title="待处理订单" class="open-tab">{$order_wait}</a>
                    </p>
                </div>
                <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i
                        class="mdi mdi-timer-sand fa-1-5x"></i></span></div>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-lg-3">
        <div class="card p-10">
            <h4>代办事项</h4>
            <div class="todo-message-services">获取中...</div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h4>近7天用户注册数</h4>
            </div>
            <div class="card-body">
                <canvas class="js-chartjs-bars"></canvas>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h4>近7天交易金额</h4>
            </div>
            <div class="card-body">
                <canvas class="js-chartjs-lines"></canvas>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-12 col-lg-６">
        <div class="card">
            <div class="card-header">
                <h4>系统信息</h4>
            </div>
            <div class="card-body">
                <table class="table table-responsive">
                    <tr>
                        <td>服务器操作系统：</td>
                        <td>{$sys_info.os} / {$sys_info.domain}</td>
                        <td>PHP 版本：</td>
                        <td>{$sys_info.php_version}</td>
                        <td>服务器环境：</td>
                        <td>{$sys_info.web_server}</td>
                    </tr>
                    <tr>
                        <td>Mysql 版本：</td>
                        <td>{$sys_info.mysql_version}</td>
                        <td>GD 版本</td>
                        <td>{$sys_info.gdinfo}</td>
                        <td>浏览器：</td>
                        <td>{$sys_info.user_agent} / {$sys_info.ip}</td>
                    </tr>
                    <tr>
                        <td>文件上传限制：</td>
                        <td>{$sys_info.fileupload}</td>
                        <td>最大占用内存：</td>
                        <td>{$sys_info.memory_limit}</td>
                        <td>最大执行时间：</td>
                        <td>{$sys_info.max_ex_time}</td>
                    </tr>
                    <tr>
                        <td>系统时间：</td>
                        <td>{$sys_info.sys_time}</td>
                        <td>Zlib支持：</td>
                        <td>{$sys_info.zlib}</td>
                        <td>Curl支持：</td>
                        <td>{$sys_info.curl}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
{notempty name="$admin_copyright"}
<footer class="page-footer">
    <span class="copyright">{$admin_copyright|raw}</span>
</footer>
{/notempty}
{/block}

{block name="script"}
<!--图表插件-->
<script type="text/javascript" src="/assets/lightyearadmin/js/Chart.js" charset="utf-8"></script>
<script type="text/javascript">
    $(document).ready(function (e) {
        var $dashChartBarsCnt = jQuery('.js-chartjs-bars')[0].getContext('2d'),
            $dashChartLinesCnt = jQuery('.js-chartjs-lines')[0].getContext('2d');

        var $dashChartBarsData = {
            labels: JSON.parse('{$days|raw}'),
            datasets: [{
                label: '注册用户',
                borderWidth: 1,
                borderColor: 'rgba(0,0,0,0)',
                backgroundColor: 'rgba(51,202,185,0.5)',
                hoverBackgroundColor: "rgba(51,202,185,0.7)",
                hoverBorderColor: "rgba(0,0,0,0)",
                data: JSON.parse('{$new_members|raw}'),
            }]
        };
        var $dashChartLinesData = {
            labels: JSON.parse('{$days|raw}'),
            datasets: [{
                label: '交易资金',
                borderColor: '#358ed7',
                backgroundColor: 'rgba(53, 142, 215, 0.175)',
                borderWidth: 1,
                fill: false,
                lineTension: 0.5,
                data: JSON.parse('{$trade_money|raw}')
            }]
        };

        new Chart($dashChartBarsCnt, {
            type: 'bar',
            data: $dashChartBarsData
        });

        var myLineChart = new Chart($dashChartLinesCnt, {
            type: 'line',
            data: $dashChartLinesData,
        });

        $('a.open-tab').click(function () {
            top.$.fn.multitabs().create(this, true);
            return false;
        });

        getMessage();

        setInterval(getMessage, 60 * 1000);
    });

    function getMessage() {
        $.ajax({
            url: '/admin/index/getMessageContent',
            data: {},
            type: "GET",
            dataType: "json",
            success: function (data) {
                if (data.code === 1) {
                    $('.todo-message-services').html(data.html);

                    if (data.msg_count > 0) {
                        if (window.Notification && Notification.permission !== "denied") {
                            Notification.requestPermission(function (status) {
                                if (status === "granted")
                                    new Notification("待办提醒", {
                                        body: '有 ' + data.msg_count + ' 条代办事项',
                                    });
                            });
                        } else {
                            layer.msg('有 ' + data.msg_count + ' 条代办事项');
                        }
                    }
                }
            },
            error: function (err) {
                console.log(err);
            }
        });
    }
</script>
{/block}
